<template>
  <div class="vehicle-approval">
    <div class="header">
      <router-link to="/main/wuye/vehicle/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>审批审核</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待审批" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="department" label="申请部门" width="150"></el-table-column>
            <el-table-column prop="useType" label="用车类型" width="120"></el-table-column>
            <el-table-column prop="useTime" label="用车时间" width="180">
              <template slot-scope="scope">
                {{ formatDateRange(scope.row.useTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleApproval(scope.row)">审批</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已审批" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="approvalResult" label="审批结果" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.approvalResult === '通过' ? 'success' : 'danger'">
                  {{ scope.row.approvalResult }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="approver" label="审批人" width="120"></el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="用车申请详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="application-detail" v-if="currentApplication">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentApplication.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentApplication.applicant }}</el-descriptions-item>
          <el-descriptions-item label="申请部门">{{ currentApplication.department }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentApplication.phone }}</el-descriptions-item>
          <el-descriptions-item label="用车类型">{{ currentApplication.useType }}</el-descriptions-item>
          <el-descriptions-item label="用车人数">{{ currentApplication.passengerCount }}人</el-descriptions-item>
          <el-descriptions-item label="目的地">{{ currentApplication.destination }}</el-descriptions-item>
          <el-descriptions-item label="预计里程">{{ currentApplication.estimatedMileage }}公里</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>用车事由</h4>
          <p>{{ currentApplication.reason }}</p>
        </div>

        <div class="detail-section">
          <h4>车辆要求</h4>
          <p>{{ currentApplication.requirements.join('、') }}</p>
        </div>

        <div class="detail-section" v-if="currentApplication.approvalHistory">
          <h4>审批记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentApplication.approvalHistory"
              :key="index"
              :type="getTimelineType(record.result)"
              :timestamp="record.time">
              {{ record.approver }} - {{ record.result }}
              <p class="approval-comment">{{ record.comment }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 审批对话框 -->
    <el-dialog title="审批" :visible.sync="approvalDialogVisible" width="50%">
      <el-form :model="approvalForm" label-width="100px">
        <el-form-item label="审批结果">
          <el-radio-group v-model="approvalForm.result">
            <el-radio label="通过">通过</el-radio>
            <el-radio label="驳回">驳回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审批意见">
          <el-input type="textarea" v-model="approvalForm.comment" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="approvalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApproval">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [],
      completedList: [],
      detailDialogVisible: false,
      approvalDialogVisible: false,
      currentApplication: null,
      approvalForm: {
        result: '通过',
        comment: ''
      },
      loading: false
    }
  },
  methods: {
    // 获取待审批列表
    async fetchPendingList() {
      try {
        this.loading = true;
        const response = await this.$http.get('/api/vehicle/pending-approvals');
        if (response.code === 200) {
          this.pendingList = response.data;
        } else {
          this.$message.error(response.message || '获取待审批列表失败');
        }
      } catch (error) {
        console.error('获取待审批列表错误:', error);
        this.$message.error('获取待审批列表失败');
      } finally {
        this.loading = false;
      }
    },

    // 获取已审批列表
    async fetchCompletedList() {
      try {
        this.loading = true;
        const response = await this.$http.get('/api/vehicle/approved-applications');
        if (response.code === 200) {
          this.completedList = response.data;
        } else {
          this.$message.error(response.message || '获取已审批列表失败');
        }
      } catch (error) {
        console.error('获取已审批列表错误:', error);
        this.$message.error('获取已审批列表失败');
      } finally {
        this.loading = false;
      }
    },

    // 提交审批
    async submitApproval() {
      if (!this.approvalForm.comment) {
        this.$message.error('请填写审批意见');
        return;
      }

      try {
        const response = await this.$http.post(`/api/vehicle/application/${this.currentApplication.id}/approve`, null, {
          params: {
            result: this.approvalForm.result,
            remark: this.approvalForm.comment
          }
        });

        if (response.code === 200) {
          this.$message.success('审批提交成功');
          this.approvalDialogVisible = false;
          // 刷新列表
          await this.fetchPendingList();
          await this.fetchCompletedList();
        } else {
          this.$message.error(response.message || '审批提交失败');
        }
      } catch (error) {
        console.error('提交审批错误:', error);
        this.$message.error('审批提交失败');
      }
    },

    // 格式化日期范围
    formatDateRange(range) {
      if (!range || !Array.isArray(range)) return '';
      return range.map(date => this.formatDate(date)).join(' 至 ');
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleString();
    },

    // 查看详情
    viewDetail(row) {
      this.currentApplication = row;
      this.detailDialogVisible = true;
    },

    // 处理审批
    handleApproval(row) {
      this.currentApplication = row;
      this.approvalForm = {
        result: '通过',
        comment: ''
      };
      this.approvalDialogVisible = true;
    },

    getTimelineType(result) {
      return result === '通过' ? 'success' : 'danger'
    }
  },
  // 页面加载时获取数据
  created() {
    this.fetchPendingList();
    this.fetchCompletedList();
  },
  // 切换标签页时刷新数据
  watch: {
    activeTab(newVal) {
      if (newVal === 'pending') {
        this.fetchPendingList();
      } else {
        this.fetchCompletedList();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-approval {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .approval-comment {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }
}
</style> 